<template>
	<view class="cash_with">
		<!-- #ifdef APP-PLUS -->
		<top-set backgroundColor="#f8f8f8"></top-set>
		<!-- #endif -->
		<view class="tab_top_box">
			
			<view class="index">
				<view class="nav_back" @tap="drawBack()">
					<image src="/static/login/back.png" mode=""></image>
				</view>
				我的钱包
				<view class="tab_zd" @tap="openBill()">账单</view>
			</view>
		</view>
		<view class="content">
			<view class="cwwx">
				<view class="wx_left">提现到</view>
				<view class="wx_right" @tap="total0(1)">
					<view v-if="(bind || bank) && type_alias" class="right_box">
						
						<view v-if="type_alias=='wxpay'" class="right_text right_text1">
							{{ bind.nick_name}}
						</view>	
						<view v-if="type_alias=='bank'" class="right_text right_text1">
							{{bank[0].bank_name}}    （{{bank[0].card_number}}）
						</view>	
						<view v-if="type_alias" class="right_icon ">
							<image v-if="type_alias=='wxpay'" src="/static/icon/wx_icon.png" mode=""></image>
							<image v-else-if="type_alias=='bank'" src="/static/icon/bank-icon.png" mode=""></image>
						</view>
						
					</view>
					<view v-else class="right_box">
						
						<!-- <view class="right_icon">
							<image src="/static/icon/right.png" mode=""></image>
						</view> -->
						<view class="right_text">
							选择提现方式
						</view>	
						
					</view>
				</view>
			</view>
			<view class="cwwx gary">
				<view class="wx_left">可提现余额 &yen; {{lock_balance}}</view>
			</view>
			<view class="cash_inpux">
				<view class="title">提现金额</view>
				<view class="input_box">
					<view class="input1">&yen;</view>
					<view class="input2">
						<input type="number" v-model="takeOut" value="" />
					</view>
					<view class="input3" @tap ="removeAll">全部提现</view>
				</view>
				<view class="text">{{message}}</view>
			</view>
			<view class="btn" @tap="popxShow">
				提现
			</view>
			
		</view>
		<jc-popUp position="bottom" ref="popx"  markTapHide="true">
			<!-- <view class="box_layer">
				<view class="head">
					<view class="icon" @tap="total1(2)">
						<image src="/static/icon/cuo.png" mode=""></image>
					</view>
					 请输入短信验证码
				</view>
				<view class="content">
					<view class="text1">本次提现</view>
					<view class="text2">
						  <text class="text_l">&yen;</text>
						  <text class="text_r">{{takeOut}}</text>
					</view>
					<view class="text3">(手续费: 0.00元)</view>
					<view class="text4" @tap = 'openKeyBoard'>
						<view class="text_input" >
							{{numList[0] || ''}}
						</view>
						<view class="text_input">
							{{numList[1] || ''}}
						</view>
						<view class="text_input">
							{{numList[2] || ''}}
						</view>
						<view class="text_input">
							{{numList[3] || ''}}
						</view>
						
						
					</view>
					
				</view>
			</view> -->
			<!-- <view class="footer">
				<view class="item">确定拉黑该酒店?</view>
				<view class="item" @tap="total(1)">确定</view>
				<view class="item" @tap="total(2)">取消</view>
			</view> -->
			<view class="verification_box">
				<view class="veri_title">请输入手机验证码</view>
				<view class="veri_post">{{verificationTelephone}}</view>
				<view class="veri_input_box">
					<view class="veri_input_icon">
						<image src="/static/icon/duanxin.png" mode=""></image>
					</view>
					<input class="veri_input" type="number" v-model="veriCode" value="" placeholder="输入手机验证码" />
					<view class="veri_input_btn" @tap="takeBtn()">
						{{msgTitle}}
					</view>
				</view>
				<view class="veri_btn" @tap="confirmationWithdrawal">确定</view>
				<view class="veri_close" @tap="total1(2)">
					<image src="/static/icon/cuo.png" mode=""></image>
				</view>
			</view>
			<!-- <NumberKeyboard
				:open="keyboardVisible"
				@number="inputCode"
				@delete="deleteCode"
				@close="keyboardVisible = false"
			></NumberKeyboard> -->
		</jc-popUp>
		<jc-popUp position="bottom" ref="popx0"  markTapHide="true">
			<view class="way_box">
				<view class="way_head">选择提现方式</view>
				<view class="way_content">
					<view class="way_list">
						<view class="way_item" @tap="tapSelectionMode('weixin')">
							<view class="way_icon">
								<image src="/static/icon/wx_icon.png" mode=""></image>
							</view>
							<view class="way_text">提现到微信</view>
							<view v-if="bind" class="way_che" :class="[selectionMode=='weixin'?'way_che_active':'']">
								<image src="/static/icon/dui.png" mode=""></image>
							</view>
							<view v-if="bind" class="way_name">{{bind.nick_name}}</view>
							<view v-else class="way_name">未绑定</view>
							
						</view>
						
						<!-- <view class="way_item">
							<view class="way_icon">
								<image src="/static/icon/ali-pay.png" mode=""></image>
							</view>
							<view class="way_text">提现到支付宝</view>
							<view class="way_che way_che_active" >
								<image src="/static/icon/dui.png" mode=""></image>
							</view>
							<view class="way_name">不***话</view>
							
						</view> -->
						
						
						<view class="way_item" @tap="tapSelectionMode('bank')">
							<view class="way_icon">
								<image src="/static/icon/bank-icon.png" mode=""></image>
							</view>
							<view class="way_text">提现到银行卡</view>
							<view v-if="bank" class="way_che" :class="[selectionMode=='bank'?'way_che_active':'']">
								<image src="/static/icon/dui.png" mode=""></image>
							</view>
							<view v-if="bank" class="way_name" scoped="nbsp">{{bank[0].bank_name}}  ({{bank[0].card_number}})</view>
							<view v-else class="way_name" scoped="nbsp">未绑定</view>
							
						</view>
						<!-- @tap="bankBind" -->
						<view class="way_item" v-if="bank" >
							<view class="way_icon">
								
								<image v-if="bank[0].bank_name == '中国邮政储蓄银行'" src="/static/icon/PSBC.png" mode=""></image>
								<image v-else-if="bank[0].bank_name == '中国农业银行'" src="/static/icon/ABC.png" mode=""></image>
								<image v-else-if="bank[0].bank_name == '中国工商银行'" src="/static/icon/ICBC.png" mode=""></image>
								<image v-else-if="bank[0].bank_name == '中国建设银行'" src="/static/icon/CCB.png" mode=""></image>
							</view>
							<view class="way_text" scoped="nbsp">{{bank[0].bank_name}}    （{{bank[0].card_number}}）</view>
							
							<!-- <view class="way_name" style="color: #3595f9">更改</view> -->
						</view>
					</view>
				</view>
				<view class="way_foot" @tap="total0(0)">确定</view>
			</view>
		</jc-popUp>
		
		
	</view>
</template>

<script>
	let msgFlag = false,accountId;//手机验证码验证
	import jcPopUp from '@/components/jc-popUp/jc-popUp.vue';
	// import NumberKeyboard from '@/components/number-keyboard/number-keyboard.vue';
	export default{
		
		data() {
			return {
				key: '',
				bind:'',
				total:'',
				focust:0,
				keyboardVisible: true,
				numList:[],
				lock_balance:0.00,
				takeOut:'',
				message:'',
				selectionMode:'',
				msgTitle:'点击获取',
				veriCode:'',
				bank:'',
				type_alias:''//提现方式
				
			}
		},
		components: {
			jcPopUp
		},
		computed:{
			verificationTelephone(){
				let phone = this.isLogin().phone;
				let lphone = phone.replace(/^(\d{3})\d{4}(\d+)/,"$1****$2");
				return `验证码发送至${lphone}`;
			}
		},
		methods: {
			tapSelectionMode(e){
				this.selectionMode = e;
				switch (e){
					case 'weixin':
						if(this.bind){
							this.type_alias='wxpay';
							
						}else{
							this.openWxBind();
						}
						
						break;
					case 'bank':
						if(this.bank){
							this.type_alias='bank';
							accountId = this.bank[0].id;
						}else{
							this.bankBind();
						}
						
						break;
					default:
						break;
				}
			},
			drawBack() {
				uni.navigateBack({
					delta: 1,
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				});
			},
			/**
			 * 获取用户信息
			 */
			getUserInfo(){
				 return new Promise((res)=>{
					this.req({
						url:'user/accountInfo',
						data:{
							id:this.isLogin().id,
						},
						method:'get'
					},(data)=>{
						res(data.data);
					},(data)=>{
						uni.showToast({
							icon:"none",
							title:"服务器繁忙,请稍后重试"
						})
					}) 
				 });
			},
			/**
			 * 获取用户余额
			 */
			getBalanceData(){
				return new Promise((res)=>{
					this.req({
						url:'both/getBalance',
						id:this.isLogin().id,
						method:'get'
					},(data)=>{
						res(data.data);
					});
				});
			},
			async initialization(){
				let res = await this.getCashOut();

				this.bind = res.data.user_info.user_wx_info;
				if(res.data.user_info.user_bank.length > 0){
					this.bank = res.data.user_info.user_bank;
					this.bank[0].card_number = this.bank[0].card_number.substring(this.bank[0].card_number.length-4);
				}
				
				let res1 = await this.getBalanceData();
				this.lock_balance = res1.data.pass_balance;
				this.message = res1.data.message ? res1.data.message : '每周三可提现!';
				
			},
			async total1(val){
				switch (val){
					case 0:
						this.$refs.popx.show();
						
						break;
					case 1:
						this.$refs.popx.hide();
						break;
					case 2:
						
						this.$refs.popx.hide();
						break;
					default:
						break;
				}
				
				
			},
			popxShow(e){
				let takeOut = this.takeOut * 1;

				if(this.takeOut == '' || !this.regularVerification('jine',takeOut)){
					uni.showToast({
						icon:'none',
						title:'请输入正确的金额'
					});

					return;
				}
				if(takeOut > (this.lock_balance*1)){
					uni.showToast({
						icon:'none',
						title:'超出本次可提现金额'
					});
					return;
				}
				
				if(!this.type_alias){
					uni.showToast({
						icon:'none',
						title:'请先选择提现方式'
					});
					return;
				}
				this.$refs.popx.show();
			},
			openKeyBoard(){
				this.keyboardVisible = true;
				
			},
			async inputCode(e){
				console.log(e);
				
				 
				this.numList.push(e);
				if(this.numList.length > 4){
					this.numList.pop();
					return;
				} 
				if(this.numList.length == 4){
					
					let val = '';
					for (let i = 0; i < 4; i++) {
						val += this.numList[i]
					}
					console.log(val);
					

					return;
				}
				
				
			},
			deleteCode(){
				this.numList.pop();
				console.log('删除');
			},
			/**
			 * 全部提现
			 */
			removeAll(){
				this.takeOut = this.lock_balance;
			},
			async takeBtn(){

				if(msgFlag){
					return;
				}
				msgFlag = true;
				
				
				uni.hideKeyboard();
				let res = await this.sendSms();
				
				if(res.status == 1){
					
					let msgTime = 59; 
					this.msgTitle = `${msgTime}秒后重发`;
					
					let setTime =  setInterval(()=>{
						
						msgTime--;
						this.msgTitle = `${msgTime}秒后重发`;
						
						if(msgTime <= 0){
							msgFlag = false;
							this.msgTitle = `点击获取`;
							clearInterval(setTime);
							
							
						}
						
					},1000)
					
				}else{
					msgFlag = false;
				}
				console.log(res);
				
				
			},
			/**
			 * 提现手机验证码
			 */
			sendSms(){
				return new Promise((res)=>{
					this.req({
						url:'api/sendSms',
						method:'get',
						data:{
							phone:this.isLogin().phone,
							key:'cashout'
						}
					},(data)=>{
						res(data.data);
					})
				})
			},
			/**
			 * both/cashOut
			 */
			cashOut(code){
				return new Promise((res)=>{
					this.req({
						url:'both/cashOut',
						data:{
							id:this.isLogin().id,
							position:this.isLogin().type,
							cash_amount:this.takeOut,
							captcha:code,
							cash_type:this.type_alias,
							cash_account:accountId
						}
					},(data)=>{
						res(data.data)
					})
				});
			},
			/**
			 * 绑定微信
			 */
			openWxBind(){
				uni.navigateTo({
					url:'/pages/user/set/bind-wx',
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				})
			},
			/**
			 * 跳转到绑定银行卡
			 */
			bankBind(){
				uni.navigateTo({
					url:'/pages/user/set/bank',
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				})
			},
			/**
			 * 打开账单
			 */
			openBill(){
				uni.navigateTo({
					url:'/pages/user/account/bill-list',
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				})
			},
			total0(e){
				switch (e){
					
					case 0:
					this.$refs.popx0.hide();
						break;
					case 1:
					this.$refs.popx0.show();
						break;
					case 2:
					this.$refs.popx0.hide();
						break;
					default:
						break;
						
				}
			},
			/**
			 * 确认提现
			 */
			async confirmationWithdrawal(){
				let res = await this.cashOut(this.veriCode);
				if(res.status == 1){
					uni.navigateTo({
						url:'/pages/user/account/cash-success',
						"animationType": this.GLOBAL.backAnimation,
						"animationDuration": this.GLOBAL.animationTime
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'提现失败,请稍后重试'
					})
				}
			},
			/**
			 * 提现方式查询
			 */
			getCashOut(){
				return new Promise((res)=>{
					this.req({
						url:'both/cashOut/create',
						method:'get',
						data:{
							uid:this.isLogin().id
						}
					},(data)=>{
						res(data.data);
					},(data)=>{
						res(data.data);
					})
				})
			}
			
		},
		mounted(){

		},
		onShow(){
			msgFlag = false;
			accountId = '';
			this.initialization();
			console.log(this.regularVerification('jine',0.66));
		},
		/**
		 * 打开账单
		 */
		openBill(){
			uni.navigateTo({
				url:'/pages/user/account/bill-list',
				"animationType": this.GLOBAL.backAnimation,
				"animationDuration": this.GLOBAL.animationTime
			})
		}
	}
</script>
<style >
page{
		background: #f8f8f8;
}	
</style>
<style lang="scss" scoped>
	.verification_box{
		width: 100%;
		height: 488upx;
		background: #FFF;
		position: absolute;
		left: 0;
		// bottom: 460upx;
		bottom: 0;
		box-sizing: border-box;
		padding-top:40upx; 
		.veri_title{
			width: 100%;
			font-size: 32upx;
			color: #333333;
			line-height: 1;
			text-align: center;
		}
		.veri_post{
			width: 100%;
			color: #999999;
			font-size: 18upx;
			line-height: 1;
			text-align: center;
			margin-top: 32upx;
		}
		.veri_input_box{
			
			width: 702upx;
			margin: 0 auto;
			margin-top: 48upx;
			height: 86upx;
			position: relative;
			.veri_input_icon{
				float: left;
				margin-top: 33upx;
				width: 24upx;
				height: 24upx;
				image{
					float: left;
					width: 100%;
					height: 100%;
				}
			}
			.veri_input{
				float: left;
				height: 100%;
				margin-left: 16upx;
				line-height: 86upx;
				font-size: 28upx;
				color: #999999;
			}
			.veri_input_btn{
				float: right;
				width: 140upx;
				height: 50upx;
				color: #FFF;
				font-size: 24upx;
				text-align: center;
				line-height: 50upx;
				background-color: #3595f9;
				border-radius: 4upx;
				margin-top: 18upx;
			}
		}
		.veri_input_box:after{
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1upx;
			transform: scaleY(0.5);
			background-color: #e5e5e5; 
		}
		.veri_btn{
			width: 702upx;
			margin: 0 auto;
			text-align: center;
			line-height: 90upx;
			color: #FFF;
			background-color: #3595f9;
			margin-top: 60upx;
			height: 90upx;
			border-radius: 8upx;
		}
		.veri_close{
			width: 100upx;
			height: 100upx;
			position: absolute;
			right: 0;
			top: 0;
			image{
				position: absolute;
				width: 20upx;
				height: 20upx;
				top: 45upx;
				right: 25upx;
			}
		}
	}
	.gary{
		background: #f8f8f8 !important;
	}
	.way_box{
		position: absolute;
		left: 0;
		bottom: 0;
		background: white;
		width: 100%;
		// height: 100upx;
		.way_head{
			width: 100%;
			height: 100upx;
			color: #999999;
			font-size: 24upx;
			text-align: center;
			line-height: 100upx;
			position: relative;
		}
		
		.way_content{
			width: 100%;
			height: auto;
			border-bottom:20upx solid #f0f0f0;
			.way_list{
				width: 100%;
				height: auto;
				.way_item:before{
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 1upx;
					transform: scaleY(0.5);
					background-color:#e5e5e5; 
				}
				.way_item{
					width: 100%;
					height: 100upx;
					position: relative;
					.way_icon{
						margin-left: 24upx;
						margin-top: 34upx;
						height: 34upx;
						width: 34upx;
						float: left;
						image{
							float: left;
							width: 100%;
							height: 100%;
						}
					}
					.way_text{
						float: left;
						color: #333333;
						font-size: 28upx;
						line-height: 1;
						margin-top: 37upx;
						margin-left: 20upx;
					}
					.way_che{
						width: 34upx;
						height: 34upx;
						float: right;
						margin-top: 34upx;
						margin-right: 24upx;
						border-radius: 50%;
						border:1upx solid #999999;
						box-sizing: border-box;
						image{
							display: none;
						}
					}
					.way_che_active{
						border:none; 
						image{
							border-radius: 50%;
							width: 100%;
							height: 100%;
							float: left;
							display: block;
						}
					}
					.way_name{
						float: right;
						font-size: 28upx;
						color: #999999;
						line-height: 1;
						margin-top: 37upx;
						margin-right: 13upx;
					}
				}
			}
			
		}
		.way_foot{
			width: 100%;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 28upx;
		}
	}
	.box_layer{
		position: fixed;
		margin: 0 auto;
		right: 0;
		left: 0;
		top: 200upx;
		width: 600upx;
		height: 448upx;
		background-color: #ffffff;
		border-radius: 8upx;
		overflow: hidden;
		.head{
			height: 106upx;
			position: relative;
			text-align: center;
			line-height: 106upx;
			font-size: 32upx;
			color: #333333;
			.icon{
				position: absolute;
				height: 106upx;
				width: 106upx;
				left: 0;
				top: 0;
				image{
					width: 20upx;
					height: 20upx;
					float: left;
					margin-top: 44upx;
					margin-left: 24upx;
				}
			}
		}
		.head:after{
			content: '';
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			height: 1upx;
			background: #E5E5E5;
			transform: scaleY(0.5);
		}
		.content{
			box-sizing: border-box;
			padding-top: 40upx;
			text-align: center;
			.text1{
				color: #333333;
				font-size: 24upx;
				line-height: 1;
			}
			.text2{
				margin-top: 23upx;
				line-height: 1;
				color: #3595f9;
				.text_l{
					font-size: 28upx;
				}
				.text_r{
					font-size: 48upx;
				}
			}
			.text3{
				margin-top: 26upx;
				line-height: 1;
				font-size: 24upx;
				color: #999999;
			}
			.text4{
				margin:  0 auto;
				margin-top: 42upx;
				width: 360upx;
				height: 90upx;
				border: 1upx solid #333333;
				position: relative;
				.text_input{
					float: left;
					width: 90upx;
					height: 90upx;
					text-align: center;
					line-height: 90upx;
					color: #333333;
					position: relative;
				}
				.text_input:after{
					content: '';
					position:absolute;
					height: 100%;
					width: 1upx;
					top: 0;
					right: 0;
					background: #333333;
				}
				.text_input:nth-last-of-type(1):after{
					content: none;
				}
				
				
				
			}
		}
	}
	.cash_with{
		.tab_top_box {
			width: 100vw;
			height: 86upx;
			background: #f8f8f8;
			.i_fixed {
				position: fixed !important;
				z-index: 99;
				left: 0;
				top: var(--status-bar-height);
			}
		
			.index {
				position: relative;
				font-size: 36upx !important;
				background: #FFFFFF;
				width: 100%;
				height: 86upx;
				background: #f8f8f8;
				line-height: 86upx;
				text-align: center;
				
			}
			.tab_zd{
				position: absolute;
				top: 0;
				right: 0;
				font-size: 32upx;
				text-align: center;
				line-height: 86upx;
				height: 100%;
				width: 120upx;
				text-align: center;
			}
			.index:after {
				content: '';
				height: 1upx;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				transform: scaleY(0.5);
				background: #E5E5E5;
			}
		
			.nav_back {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 60upx;
			}
		
			.nav_back image {
				position: absolute;
				width: 32upx;
				height: 32upx;
				left: 27upx;
				top: 27upx;
			}
		}
	}
	.cash_with > .content{
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 86upx);
		background: #f8f8f8;
		.cwwx{
			width: 100%;
			height: 100upx;
			box-sizing: border-box;
			padding: 0 24upx;
			background: #FFFFFF;
			.wx_left{
				float: left;
				color: #333333;
				font-size: 28upx;
				line-height: 100upx;
			}
			.wx_right{
				float: right;
				margin-top: 37upx;
				// width: 200upx;
				height: 26upx;
				.right_box{
					
					.right_text{
						float: right;
						font-size: 28upx;
						color: #999999;
						line-height: 1;
					}
					.right_icon{
						float: right;
						width: 26upx;
						height: 26upx;
						margin-left: 14upx;
						image{
							float: left;
							width: 26upx;
							height: 26upx;
						}
					}
					.right_text1{
						margin-left: 14upx;
					}
				}
				
			}
			
		}
		.cash_inpux{
			width: 100%;
			height: 266upx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 40upx 24upx;
			.title{
				color: #333333;
				font-size: 28upx;
				line-height: 1;
			}
			.input_box{
				height: 107upx;
				position: relative;
				box-sizing: border-box;
				padding-top: 40upx;
				.input1{
					float: left;
					font-size: 48upx;
					line-height: 1;
					color: #333333;
				}
				.input2{
					width: 400upx;
					margin-left: 10upx;
					float: left;
					font-size: 48upx;
					
				}
				.input3{
					float: right;
					color: #3595f9;
					font-size: 24upx;
					width: 180upx;
					text-align: right;
					line-height: 50upx;
				}
			}
			.input_box:after{
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1upx;
				background-color: #E5E5E5;
				transform: scaleY(0.5);
			}
			.text{
				font-size: 24upx;
				line-height: 1;
				color: #999999;
				margin-top: 28upx;
			}
		}
		.btn{
			
			margin: 0 auto;
			margin-top: 160upx;
			width: 540upx;
			height: 90upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 90upx;
			background-color: #3595f9;
			border-radius: 8upx;
		}
	}
</style>
